<template>
  <el-dialog
    :visible="dialogVisible"
    :close-on-click-modal="false"
    :title="elDialogTitle"
    width="700px"
    top="5%"
    :before-close="cancelClose"
  >
    <el-form ref="addform" :model="addform" label-width="120px">
      <el-form-item label="展示类型：" required>
        <el-button-group>
          <el-button
            @click="changeAutofocus(0)"
            :class="{ 'focus-button': addform.type == 0 }"
          >
            图表大屏
          </el-button>
          <el-button
            @click="changeAutofocus(1)"
            :class="{ 'focus-button': addform.type == 1 }"
            >文字大屏</el-button
          >
        </el-button-group>
        <div v-if="addform.type != 1" style="height: calc(100vh - 490px)"></div>
      </el-form-item>
      <el-form-item
        v-if="addform.type == 1"
        label="选择模板："
        prop="tableFrom"
        required
      >
      </el-form-item>
      <div class="model-box" v-if="addform.type == 1">
        <el-scrollbar
          :wrap-style="[
            { height: 'calc(100vh - 600px)', 'min-height': '400px' }
          ]"
          class="my-scrollbar"
        >
          <el-row :gutter="8" class="disWrap">
            <el-col :span="8" v-for="(model, index) in modelImg" :key="index">
              <div @click="chooseOne(index)">
                <div
                  class="model-sign"
                  :class="{ 'choose-one': addform.choosNum == index }"
                >
                  <el-image
                    :ref="'preview-' + index"
                    style="width: 100%; height: 100%; border-radius: 6px"
                    fit="fill"
                    :src="model.url"
                  >
                  </el-image>
                </div>
                <div
                  class="title-name"
                  :class="{ 'choose-text': addform.choosNum == index }"
                >
                  模板{{ index + 1 }}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelClose">取 消</el-button>
      <el-button type="primary" @click="sureAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      modelImg: [
        {
          type: 'modelType1',
          url: require('@/assets/img/model/model-1.png')
        },
        {
          type: 'modelType2',
          url: require('@/assets/img/model/model-2.png')
        },
        {
          type: 'modelType3',
          url: require('@/assets/img/model/model-3.png')
        },
        {
          type: 'modelType4',
          url: require('@/assets/img/model/model-4.png')
        }
      ],

      addform: {
        type: 0,
        choosNum: 0
      },

      typeList: [],

      elDialogTitle: '选择模板样式',
      dialogVisible: false
    }
  },

  mounted() {},
  methods: {
    changeAutofocus(v) {
      this.addform.type = v
      this.$forceUpdate()
    },
    chooseOne(index) {
      this.addform.choosNum = index
    },

    cancelClose() {
      this.dialogVisible = false
    },

    sureAdd() {
      this.cancelClose()
      if (!this.addform.id) {
        if (this.addform.type != 0) {
          if (this.addform.choosNum != 2) {
            Object.assign(this.addform, {
              contentLists: [{ title: '', content: '' }]
            })
          } else {
            Object.assign(this.addform, {
              contentLists: [
                { title: '', content: '' },
                { title: '', content: '' },
                { title: '', content: '' }
              ]
            })
          }
        }
      }
      this.$emit('addTypeData', this.addform)
      Object.assign(this.$data, this.$options.data())
    },

    show() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .image-inner {
    pointer-events: none;
  }
  .my-scrollbar .el-scrollbar__bar.is-horizontal {
    display: none;
  }
  .el-image__inner {
    border-radius: 6px;
  }
  .el-button:focus {
    color: #606266;
    border-color: #dcdfe6;
    background-color: #fff;
  }
  .focus-button,
  .focus-button:focus,
  .el-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}

.model-box {
  cursor: pointer;
  margin-top: -10px;
  padding-left: 40px;
  height: calc(100vh - 600px);
  min-height: 400px;
  overflow: hidden;
  .title-name {
    text-align: center;
    margin-bottom: 16px;
  }
  .model-sign {
    overflow: hidden;

    width: 100%;
    aspect-ratio: 4 / 3; /* 宽度与高度的比例为 4:3 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-bottom: 6px;
  }
  .choose-one {
    // border: 2px solid #409eff;
    border-radius: 6px;
    box-sizing: border-box;
    transform: scale(1.05);
  }
  .choose-text {
    color: #409eff;
  }
}
</style>
